<template>
  <DatePicker
    v-model="range"
    type="daterange"
    align="right"
    style="width: 220px;"
    unlink-panels
    format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="预约开始日期"
    end-placeholder="预约结束日期"
    :shortcuts="shortcuts"
    @on-change="handleChangeDay"
  >
  </DatePicker>
</template>


<script>
import {mapActions} from "vuex"
import {formatYmd} from "@/libs/format";
export default {
  emits: ["handleInput"],
  props: {
    value: null,
    name: String,
  },
  data() {
    return {
      range: [],
      options: {
        shortcuts: [{
          text: '最近一周',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          })(),
        }, {
          text: '最近一个月',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          })(),
        }, {
          text: '最近三个月',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          })(),
        }]
      }
    }
  },
  mounted() {
    if (this.value) {
      this.range = this.value;
    }
  },
  watch: {
    value() {
      if (this.value) {
        this.range = this.value;
      }
    }
  },
  methods: {
    handleChangeDay(value) {
      this.$emit('handleInput', value.length == 2 ? [this.$formatYmd(value[0]), this.$formatYmd(value[1])] : [], this.name);
    },
  }
}
</script>
